<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <div class="divBox">
        <el-card :bordered="false" dis-hover>
          <div slot="header">
            <div class="acea-row row-middle">
              <el-avatar
                icon="el-icon-s-operation"
                size="small"
                style="color: #1890ff; background: #e6f7ff; font-size: 13px"
              />
              <span class="ivu-pl-8">有效期提醒</span>
              <span class="ivu-pl-num">{{ remainList.length }}</span>
            </div>
          </div>
          <el-table :data="remainList">
            <el-table-column label="药品名称" prop="drugName"></el-table-column>
            <el-table-column label="过期时间" prop="termOfValidity">
              <template slot-scope="scope">
                <termOfValidity :value="scope.row.termOfValidity"></termOfValidity>
              </template>
            </el-table-column>
            <el-table-column label="数量" prop="leftCount">
              <template slot-scope="scope">{{ scope.row.leftCount + scope.row.packageUnit }}</template>
            </el-table-column>
          </el-table>
          <div class="divBox-bottom">
            <el-button
              v-if="remainList.length > 0"
              v-permission="['admin','drugDelivery:list']"
              @click="onInsertDelivery"
              type="primary"
            >加入出库订单</el-button>
          </div>
        </el-card>
        <el-card :bordered="false" dis-hover>
          <div slot="header">
            <div class="acea-row row-middle">
              <el-avatar
                icon="el-icon-s-operation"
                size="small"
                style="color: #1890ff; background: #e6f7ff; font-size: 13px"
              />
              <span class="ivu-pl-8">库存提醒</span>
              <span class="ivu-pl-num">{{ drugList.length }}</span>
            </div>
          </div>
          <el-table :data="drugList" height="100%">
            <el-table-column label="药品名称" prop="drugName"></el-table-column>
            <el-table-column label="月使用量" prop="mothUse">
              <template slot-scope="scope">{{ scope.row.mothUse + scope.row.packageUnit }}</template>
            </el-table-column>
            <el-table-column label="当前库存" prop="stock">
              <template slot-scope="scope">{{ scope.row.stock + scope.row.packageUnit }}</template>
            </el-table-column>
          </el-table>
        </el-card>
      </div> 
    </div>
  </div>
</template>

<script>
import { getData } from "@/api/system/home";
import termOfValidity from '@/views/storageRoom/drugRemain/module/termOfValidity';

export default {
  name: "Dashboard",
  components: { termOfValidity },
  data() {
    return {
      remainList: [],
      drugList: []
    }
  },
  created() {
    getData().then(res => {
      let remains = res.remains;
      remains.sort((val1, val2) => {
        let time1 = new Date(val1.termOfValidity.replace(/-/g, "/")).getTime();
        let time2 = new Date(val2.termOfValidity.replace(/-/g, "/")).getTime();
        return time1 - time2;
      });
      this.remainList = remains;
      this.drugList = res.stockWarning;
    });
  },
  methods: {
    onInsertDelivery() {
      this.$router.push({name: "purchasePlan", params: { operation: 1, type: 3 }});
    }
  }
};
</script>

<style>
.dashboard-container {
  height: calc(100vh - 84px);
}
.dashboard-editor-container {
  background-color: rgb(240, 242, 245);
  padding: 18px 22px 22px 22px;
  height: 100%;
}

.dashboard-editor-container .ivu-pl-8 {
  margin-left: 10px;
}

.dashboard-editor-container .ivu-pl-num {
  border: 1px solid #ff8432;
  font-weight: normal;
  border-radius: 30px;
  color: #ff8432;
  margin-left: 8px;
  font-size: 14px;
  padding: 0 10px;
  height: 18px;
}

.dashboard-editor-container .divBox {
  justify-content: space-between;
  height: calc(100% - 30px);
  display: flex;
}

.dashboard-editor-container .divBox .el-card {
  width: calc(50% - 10px);
}

.dashboard-editor-container .divBox .el-card .el-card__body {
  height: calc(100% - 70px);
  padding-bottom: 0;
  border-bottom: 0;
}

.dashboard-editor-container .divBox .el-card {
  height: 100%;
}

.dashboard-editor-container .divBox .el-table {
  height: calc(100% - 40px);
}

.dashboard-editor-container .divBox .el-table__body-wrapper {
  height: calc(100% - 40px);
  overflow-y: auto;
}

.dashboard-editor-container .divBox .divBox-bottom {
  justify-content: flex-end;
  align-items: center;
  display: flex;
  height: 40px;
}
</style>
